<template>
    <Tabbar
        :model-value="props.selected" active-color="#E60044" inactive-color="#333333" :border="false"
        @change="onChange"
    >
        <TabbarItem v-for="(item, index) in list" :key="index">
            <div class="icon-box">
                <img :src="selected == index ? item.iconSelect : item.icon" class="icon" />
            </div>
            <div class="tabbar-text">
                {{ item.text }}
            </div>
        </TabbarItem>
    </Tabbar>
</template>

<script lang="ts"  setup>
/**
 * 用法：
 *    <XCTabbar :selected="1" />
 * params:
 *    selected: 选中某个导航 索引从 0 开始
 */
import { Tabbar, TabbarItem } from 'vant';
import { getImageUrl } from '@/utils/index';

const props = defineProps<{
    selected: number
}>();



const onChange = (e: number) => {
    const pathMap: { [key: number]: string } = {
        0: '/pages/index/index',
        1: '/pages/product/product',
        2: '/pages/case/case',
        3: '/pages/my/my'
    };
    if (window.wx) {
        window.wx.miniProgram.switchTab({ url: pathMap[e] });
    }
};

const list = [
    {
        'pagePath': '/pages/index/index',
        'text': '投放仪表盘',
        'icon': getImageUrl('yibiaopan.png'),
        'iconSelect': getImageUrl('yibiaopan-active.png')
    },
    {
        'pagePath': '/pages/product/product',
        'text': '软产品',
        'icon': getImageUrl('project.png'),
        'iconSelect': getImageUrl('project-active.png')
    },
    {
        'pagePath': '/pages/case/case',
        'text': '成功案例',
        'icon': getImageUrl('anli.png'),
        'iconSelect': getImageUrl('anli-active.png')
    },
    {
        'pagePath': '/pages/my/my',
        'text': '我的',
        'icon': getImageUrl('my.png'),
        'iconSelect': getImageUrl('my-active.png')
    }
];

</script>

<style lang="scss" scoped>
.icon-box {
    margin-top: 6px;
    text-align: center;

    .icon {
        width: 28px;
        height: 28px;
    }
}

.tabbar-text {
    font-family: PingFangSC-Regular, sans-serif;
    font-weight: 400;
    font-size: 10px;
    margin-bottom: 12px;
    text-align: center;
}
</style>
